
import React, { useState } from 'react';
import { Card, Input, Button, message, Row, Col, Typography, Space } from 'antd';
import { CopyOutlined, ClearOutlined, SwapOutlined } from '@ant-design/icons';

const { Title, Text } = Typography;
const { TextArea } = Input;

const Base64DecoderPage: React.FC = () => {
  const [encodedText, setEncodedText] = useState('');
  const [decodedText, setDecodedText] = useState('');

  const handleDecode = () => {
    try {
      if (!encodedText.trim()) {
        message.warning('请输入Base64编码内容');
        return;
      }

      const decoded = atob(encodedText);
      setDecodedText(decoded);
      message.success('解码成功');
    } catch (error) {
      message.error('解码失败，请检查输入的Base64格式是否正确');
      console.error('Base64解码错误:', error);
    }
  };

  const handleEncode = () => {
    try {
      if (!decodedText.trim()) {
        message.warning('请输入要编码的文本');
        return;
      }

      const encoded = btoa(decodedText);
      setEncodedText(encoded);
      message.success('编码成功');
    } catch (error) {
      message.error('编码失败，请检查输入文本');
      console.error('Base64编码错误:', error);
    }
  };

  const copyToClipboard = (text: string) => {
    navigator.clipboard.writeText(text)
      .then(() => {
        message.success('已复制到剪贴板');
      })
      .catch(() => {
        message.error('复制失败');
      });
  };

  const clearAll = () => {
    setEncodedText('');
    setDecodedText('');
    message.info('已清空所有内容');
  };

  return (
    <div className="layout-container">
      <Card>
        <Title level={3} style={{ textAlign: 'center', marginBottom: 30 }}>
          Base64 编解码工具
        </Title>
        
        <Row gutter={[20, 20]}>
          <Col xs={24} md={12}>
            <Space direction="vertical" style={{ width: '100%' }}>
              <Text strong>Base64编码内容:</Text>
              <TextArea
                rows={8}
                placeholder="请输入Base64编码内容"
                value={encodedText}
                onChange={(e) => setEncodedText(e.target.value)}
              />
              <Space>
                <Button 
                  type="primary" 
                  icon={<SwapOutlined />} 
                  onClick={handleDecode}
                >
                  解码
                </Button>
                <Button 
                  icon={<CopyOutlined />} 
                  onClick={() => copyToClipboard(encodedText)}
                >
                  复制
                </Button>
              </Space>
            </Space>
          </Col>
          
          <Col xs={24} md={12}>
            <Space direction="vertical" style={{ width: '100%' }}>
              <Text strong>解码结果:</Text>
              <TextArea
                rows={8}
                placeholder="解码结果将显示在这里"
                value={decodedText}
                onChange={(e) => setDecodedText(e.target.value)}
              />
              <Space>
                <Button 
                  type="primary" 
                  icon={<SwapOutlined />} 
                  onClick={handleEncode}
                >
                  编码
                </Button>
                <Button 
                  icon={<CopyOutlined />} 
                  onClick={() => copyToClipboard(decodedText)}
                >
                  复制
                </Button>
              </Space>
            </Space>
          </Col>
        </Row>
        
        <div style={{ textAlign: 'center', marginTop: 30 }}>
          <Button 
            type="default" 
            icon={<ClearOutlined />} 
            onClick={clearAll}
            size="large"
          >
            清空所有内容
          </Button>
        </div>
      </Card>
    </div>
  );
};

export default Base64DecoderPage;